<template>
  <el-form :model="formDataModel" ref="GoodsForm" :rules="rules" label-position="left" label-width="80px" size="small"
           @submit.prevent>
    <div class="static-container">
      <div class="static-number">
        <div>编号: {{formDataModel.businessCode}}</div>
      </div>
      <div class="static-date">
        <div>日期: {{parseTime(formDataModel.businessDate)}}</div>
      </div>
    </div>
    <div class="table-container">
      <table class="table-layout">
        <tbody>
        <tr>
          <td class="table-cell" colspan="1" rowspan="3">
            <div class="static-content-item">
              <div>商品属性</div>
            </div>
          </td>
          <td class="table-cell" colspan="2">
            <!-- 商品属性1 -->
            <el-form-item label="" label-width="0" prop="goodsAttribute1" class="small-margin-bottom">
              <el-input v-model="formDataModel.goodsAttribute1" type="text" :disabled="formDisabled.goodsAttribute1" clearable></el-input>
            </el-form-item>
          </td>
          <td class="table-cell" colspan="3" rowspan="4">
            <el-form-item label="" label-width="0" prop="goodsImage" class="small-margin-bottom">
              <image-upload v-model="formDataModel.goodsImage" :is-show-tip="false" :disabled="formDisabled.goodsImage" :limit="1" ></image-upload>
            </el-form-item>
          </td>
        </tr>
        <tr>
          <td class="table-cell" colspan="2">
            <!-- 商品属性2 -->
            <el-form-item label="" label-width="0" prop="goodsAttribute2" class="small-margin-bottom">
              <el-input v-model="formDataModel.goodsAttribute2" type="text" :disabled="formDisabled.goodsAttribute2"  clearable></el-input>
            </el-form-item>
          </td>
        </tr>
        <tr>
          <td class="table-cell" colspan="1">
            <!-- 商品属性3 -->
            <el-form-item label="" label-width="0" prop="goodsAttribute3" class="small-margin-bottom">
              <el-input v-model="formDataModel.goodsAttribute3" type="text" :disabled="formDisabled.goodsAttribute3" clearable></el-input>
            </el-form-item>
          </td>
          <td class="table-cell" colspan="1">
            <!-- 商品属性4 -->
            <el-form-item label="" label-width="0" prop="goodsAttribute4" class="small-margin-bottom">
              <el-input v-model="formDataModel.goodsAttribute4" type="text" :disabled="formDisabled.goodsAttribute4" clearable></el-input>
            </el-form-item>
          </td>
        </tr>
        <tr>
          <td class="table-cell">
            <div class="static-content-item">
              <div>商品类别</div>
            </div>
          </td>
          <td class="table-cell" colspan="2">
            <el-form-item label="" label-width="0" prop="goodsType" class="small-margin-bottom">
              <el-select v-model="formDataModel.goodsType" :disabled="formDisabled.goodsType" style="width: 300px">
                <el-option label="家用电器" value="1"/>
                <el-option label="服装" value="2"/>
                <el-option label="生活用品" value="3"/>
              </el-select>
            </el-form-item>
          </td>
        </tr>
        <tr>
          <td class="table-cell">
            <div class="static-content-item">
              <div>商品名称</div>
            </div>
          </td>
          <td class="table-cell" colspan="2">
            <el-form-item label="" label-width="0" prop="goodsName" class="small-margin-bottom">
              <el-input v-model="formDataModel.goodsName" type="text" :disabled="formDisabled.goodsName" clearable></el-input>
            </el-form-item>
          </td>
          <td class="table-cell">
            <div class="static-content-item">
              <div>商品编码</div>
            </div>
          </td>
          <td class="table-cell" colspan="2">
            <el-form-item label="" label-width="0" prop="goodsCode" class="small-margin-bottom">
              <el-input v-model="formDataModel.goodsCode" type="text" :disabled="formDisabled.goodsCode" clearable></el-input>
            </el-form-item>
          </td>
        </tr>
        <tr>
          <td class="table-cell">
            <div class="static-content-item">
              <div>型号</div>
            </div>
          </td>
          <td class="table-cell" colspan="2">
            <el-form-item label="" label-width="0" prop="goodsModel" class="small-margin-bottom">
              <el-input v-model="formDataModel.goodsModel" type="text" :disabled="formDisabled.goodsModel" clearable></el-input>
            </el-form-item>
          </td>
          <td class="table-cell">
            <div class="static-content-item">
              <div>颜色</div>
            </div>
          </td>
          <td class="table-cell" colspan="2">
            <el-form-item label="" label-width="0" prop="goodsColor" class="small-margin-bottom">
              <el-input v-model="formDataModel.goodsColor" type="text" :disabled="formDisabled.goodsColor" clearable></el-input>
            </el-form-item>
          </td>
        </tr>
        <tr>
          <td class="table-cell">
            <div class="static-content-item">
              <div>规格</div>
            </div>
          </td>
          <td class="table-cell" colspan="2">
            <el-form-item label="" label-width="0" prop="goodsSku" class="small-margin-bottom">
              <el-input v-model="formDataModel.goodsSku" type="text" :disabled="formDisabled.goodsSku" clearable></el-input>
            </el-form-item>
          </td>
          <td class="table-cell">
            <div class="static-content-item">
              <div>安规认证</div>
            </div>
          </td>
          <td class="table-cell" colspan="2">
            <el-form-item label="" label-width="0" prop="goodsAuth" class="small-margin-bottom">
              <el-input v-model="formDataModel.goodsAuth" type="text" :disabled="formDisabled.goodsAuth" clearable></el-input>
            </el-form-item>
          </td>
        </tr>
        <tr>
          <td class="table-cell">
            <div class="static-content-item">
              <div>商品净重</div>
            </div>
          </td>
          <td class="table-cell" colspan="1">
            <el-form-item label="" label-width="0" prop="goodsWeight" class="small-margin-bottom">
              <el-input v-model="formDataModel.goodsWeight" type="text" :disabled="formDisabled.goodsWeight" clearable></el-input>
            </el-form-item>
          </td>
          <td class="table-cell" colspan="1">
            <el-form-item label="" label-width="0" prop="goodsWeightUnit" class="small-margin-bottom">
              <el-input v-model="formDataModel.goodsWeightUnit" type="text" :disabled="formDisabled.goodsWeightUnit" clearable></el-input>
            </el-form-item>
          </td>
          <td class="table-cell">
            <div class="static-content-item">
              <div>创建人</div>
            </div>
          </td>
          <td class="table-cell" colspan="2">
            <el-form-item label="" label-width="0" prop="createUser" class="small-margin-bottom">
              <el-input v-model="formDataModel.createUser" type="text" :disabled="formDisabled.createUser" clearable></el-input>
            </el-form-item>
          </td>
        </tr>
        <tr>
          <td class="table-cell">
            <div class="static-content-item">
              <div>成本</div>
            </div>
          </td>
          <td class="table-cell" colspan="1">
            <el-form-item label="" label-width="0" prop="goodsCost" class="small-margin-bottom">
              <el-input v-model="formDataModel.goodsCost" type="text" :disabled="formDisabled.goodsCost" clearable></el-input>
            </el-form-item>
          </td>
          <td class="table-cell" colspan="1">
            <el-form-item label="" label-width="0" prop="goodsCostUnit" class="small-margin-bottom">
              <el-input v-model="formDataModel.goodsCostUnit" type="text" :disabled="formDisabled.goodsCostUnit" clearable></el-input>
            </el-form-item>
          </td>
          <td class="table-cell">
            <div class="static-content-item">
              <div>财务核算</div>
            </div>
          </td>
          <td class="table-cell" colspan="2">
            <el-form-item label="" label-width="0" prop="financialAccounting" class="small-margin-bottom">
              <el-input v-model="formDataModel.financialAccounting" type="text" :disabled="formDisabled.financialAccounting" clearable></el-input>
            </el-form-item>
          </td>
        </tr>
        <tr>
          <td class="table-cell" colspan="6">
            <div class="static-content-item">
              <div>销售价</div>
            </div>
          </td>
        </tr>
        <tr>
          <td class="table-cell" colspan="6">
            <el-form-item label="" label-width="0" prop="input109798" class="small-margin-bottom">
              <el-button icon="Plus" style="width: 100px;margin: 5px" @click="handleAddPrice" v-show="formHidden.priceDataOperate" :disabled="formDisabled.priceDataOperate">添 加</el-button>
              <el-table :data="formDataModel.priceData" border style="width: 100%" :style="{'pointer-events': formDisabled.priceData ? 'none' : 'auto'}" :header-cell-style="{ 'text-align': 'center' }">
                <el-table-column type="index" label="序号" align="center"/>
                <el-table-column prop="number" label="数量">
                  <template #default="scope">
                    <el-form-item label="" label-width="0" prop="number" class="small-margin-bottom">
                      <el-input v-model="scope.row.number" type="text" clearable></el-input>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column prop="taxExcludingPrice" label="未税单价">
                  <template #default="scope">
                    <el-form-item label="" label-width="0" prop="taxExcludingPrice" class="small-margin-bottom">
                      <el-input v-model="scope.row.taxExcludingPrice" type="text" clearable></el-input>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column prop="taxRate" label="税率">
                  <template #default="scope">
                    <el-form-item label="" label-width="0" prop="taxRate" class="small-margin-bottom">
                      <el-input v-model="scope.row.taxRate" type="text" clearable></el-input>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column prop="taxIncludedPrice" label="含税单价">
                  <template #default="scope">
                    <el-form-item label="" label-width="0" prop="taxIncludedPrice" class="small-margin-bottom">
                      <el-input v-model="scope.row.taxIncludedPrice" type="text" clearable></el-input>
                    </el-form-item>
                  </template>
                </el-table-column>
              </el-table>
            </el-form-item>
          </td>
        </tr>
        <tr>
          <td class="table-cell" colspan="1" rowspan="2">
            <div class="static-content-item">
              <div>是否公开</div>
            </div>
          </td>
          <td class="table-cell" colspan="1">
            <!-- 是否公开1 -->
            <el-form-item label="" label-width="0" prop="isOpen1" class="small-margin-bottom">
              <el-select v-model="formDataModel.isOpen1" :disabled="formDisabled.isOpen1" style="width: 240px">
                <el-option label="是" value="Y"/>
                <el-option label="否" value="N"/>
              </el-select>
            </el-form-item>
          </td>
          <td class="table-cell" colspan="1">
            <!-- 是否公开2 -->
            <el-form-item label="" label-width="0" prop="isOpen2" class="small-margin-bottom">
              <el-input v-model="formDataModel.isOpen2" type="text" :disabled="formDisabled.isOpen2" clearable></el-input>
            </el-form-item>
          </td>
          <td class="table-cell" colspan="1" rowspan="2">
            <div class="static-content-item">
              <div>审批</div>
            </div>
          </td>
          <td class="table-cell" colspan="2">
            <!-- 审批1 -->
            <el-form-item label="" label-width="0" prop="examineAndApprove1" class="small-margin-bottom">
              <el-input v-model="formDataModel.examineAndApprove1" type="text" :disabled="formDisabled.examineAndApprove1" clearable></el-input>
            </el-form-item>
          </td>
        </tr>
        <tr>
          <td class="table-cell" colspan="1">
            <!-- 是否公开3 -->
            <el-form-item label="" label-width="0" prop="isOpen3" class="small-margin-bottom">
              <el-select v-model="formDataModel.isOpen3" :disabled="formDisabled.isOpen3" style="width: 240px">
                <el-option label="是" value="Y"/>
                <el-option label="否" value="N"/>
              </el-select>
            </el-form-item>
          </td>
          <td class="table-cell" colspan="1">
            <!-- 是否公开4 -->
            <el-form-item label="" label-width="0" prop="isOpen4" class="small-margin-bottom">
              <el-input v-model="formDataModel.isOpen4" type="text" :disabled="formDisabled.isOpen4" clearable></el-input>
            </el-form-item>
          </td>
          <td class="table-cell" colspan="2">
            <!-- 审批2 -->
            <el-form-item label="" label-width="0" prop="examineAndApprove2" class="small-margin-bottom">
              <el-input v-model="formDataModel.examineAndApprove2" type="text" :disabled="formDisabled.examineAndApprove2" clearable></el-input>
            </el-form-item>
          </td>
        </tr>
        <tr>
          <td class="table-cell" colspan="1" rowspan="3" style="height: 100px">
            <div class="static-content-item">
              <div>意见或建议</div>
            </div>
          </td>
        </tr>
        <tr>
          <td class="table-cell" colspan="5" rowspan="3">
            <el-form-item label="" label-width="0" prop="opinionsOrSuggestions" class="small-margin-bottom">
              <el-input type="textarea" :rows="5" v-model="formDataModel.opinionsOrSuggestions" :disabled="formDisabled.opinionsOrSuggestions" ></el-input>
            </el-form-item>
          </td>
        </tr>
        </tbody>
      </table>
    </div>
  </el-form>

</template>

<script setup name="GoodsForm">
import {deepCloneObj} from "@/utils";
import ImageUpload from "@/components/ImageUpload/index.vue";
const { proxy } = getCurrentInstance();
const disabled = ref(false);

const data = reactive({
  // 表单数据初始值
  formDataModel: {
    businessCode: new Date().getTime(),
    businessDate: new Date().getTime(),
    goodsAttribute1: "",
    goodsAttribute2: "",
    goodsAttribute3: "",
    goodsAttribute4: "",
    goodsImage: "",
    goodsType: "",
    goodsName: "",
    goodsCode: "",
    goodsModel: "",
    goodsColor: "",
    goodsSku: "",
    goodsAuth: "",
    goodsWeight: "",
    goodsWeightUnit: 'KG',
    createUser: "",
    goodsCost: "",
    goodsCostUnit: 'RMB',
    financialAccounting: "",
    isOpen1: "",
    isOpen2: "",
    isOpen3: "",
    isOpen4: "",
    examineAndApprove1: "",
    examineAndApprove2: "",
    opinionsOrSuggestions: "",
    priceDataOperate: "",
    priceData: [{
      number: '500<OTY<1K',
      taxExcludingPrice: '',
      taxRate: '0%',
      taxIncludedPrice: '',
    }],
  },
  // 指定表单组件名称和类型
  formDataModelType: {
    goodsAttribute1: "input",
    goodsAttribute2: "input",
    goodsAttribute3: "input",
    goodsAttribute4: "input",
    goodsImage: "image",
    goodsType: "select",
    goodsName: "input",
    goodsCode: "input",
    goodsModel: "input",
    goodsColor: "input",
    goodsSku: "input",
    goodsAuth: "input",
    goodsWeight: "input",
    goodsWeightUnit: "input",
    createUser: "input",
    goodsCost: "input",
    goodsCostUnit: "input",
    financialAccounting: "input",
    isOpen1: "radio",
    isOpen2: "input",
    isOpen3: "radio",
    isOpen4: "input",
    examineAndApprove1: "input",
    examineAndApprove2: "input",
    opinionsOrSuggestions: "input",
    priceDataOperate: "button",
    priceData: "list",
  },
  // 指定表单组件是否禁用
  formDisabled: {
    goodsAttribute1: false,
    goodsAttribute2: false,
    goodsAttribute3: false,
    goodsAttribute4: false,
    goodsImage: false,
    goodsType: false,
    goodsName: true,
    goodsCode: true,
    goodsModel: true,
    goodsColor: true,
    goodsSku: true,
    goodsAuth: true,
    goodsWeight: true,
    goodsWeightUnit: true,
    createUser: true,
    goodsCost: true,
    goodsCostUnit: true,
    financialAccounting: true,
    isOpen1: true,
    isOpen2: true,
    isOpen3: true,
    isOpen4: true,
    examineAndApprove1: true,
    examineAndApprove2: true,
    opinionsOrSuggestions: true,
    priceDataOperate: true,
    priceData: true,
  },
  // 指定表单组件是否隐藏
  formHidden: {
    goodsAttribute1: true,
    goodsAttribute2: true,
    goodsAttribute3: true,
    goodsAttribute4: true,
    goodsImage: true,
    goodsType: true,
    goodsName: true,
    goodsCode: true,
    goodsModel: true,
    goodsColor: true,
    goodsSku: true,
    goodsAuth: true,
    goodsWeight: true,
    goodsWeightUnit: true,
    createUser: true,
    goodsCost: true,
    goodsCostUnit: true,
    financialAccounting: true,
    isOpen1: true,
    isOpen2: true,
    isOpen3: true,
    isOpen4: true,
    examineAndApprove1: true,
    examineAndApprove2: true,
    opinionsOrSuggestions: true,
    priceDataOperate: true,
    priceData: true,
  },
  // 指定表单组件属性列表,type: invisible:不可见 readonly:只读 readwrite:可读写
  fieldWidgets: [
    {
      id: 'goodsAttribute1',
      label: '商品属性1',
      required: false, // 是否必填
      type: 'readwrite', // 默认设置为可读写
    },
    {
      id: 'goodsAttribute2',
      label: '商品属性2',
      required: false, // 是否必填
      type: 'readwrite', // 默认设置为可读写
    },
    {
      id: 'goodsAttribute3',
      label: '商品属性3',
      required: false, // 是否必填
      type: 'readwrite', // 默认设置为可读写
    },
    {
      id: 'goodsAttribute4',
      label: '商品属性4',
      required: false, // 是否必填
      type: 'readwrite', // 默认设置为可读写
    },
    {
      id: 'goodsImage',
      label: '商品图片',
      required: false, // 是否必填
      type: 'readwrite', // 默认设置为可读写
    },
    {
      id: 'goodsType',
      label: '商品类型',
      required: false, // 是否必填
      type: 'readwrite', // 默认设置为可读写
    },
    {
      id: 'goodsName',
      label: '商品名称',
      required: false, // 是否必填
      type: 'readwrite', // 默认设置为可读写
    },
    {
      id: 'goodsCode',
      label: '商品编码',
      required: false, // 是否必填
      type: 'readwrite', // 默认设置为可读写
    },
    {
      id: 'goodsModel',
      label: '商品型号',
      required: false, // 是否必填
      type: 'readwrite', // 默认设置为可读写
    },
    {
      id: 'goodsColor',
      label: '商品颜色',
      required: false, // 是否必填
      type: 'readwrite', // 默认设置为可读写
    },
    {
      id: 'goodsSku',
      label: '商品规格',
      required: false, // 是否必填
      type: 'readwrite', // 默认设置为可读写
    },
    {
      id: 'goodsAuth',
      label: '安规认证',
      required: false, // 是否必填
      type: 'readwrite', // 默认设置为可读写
    },
    {
      id: 'goodsWeight',
      label: '商品净重',
      required: false, // 是否必填
      type: 'readwrite', // 默认设置为可读写
    },
    {
      id: 'goodsWeightUnit',
      label: '商品净重单位',
      required: false, // 是否必填
      type: 'readwrite', // 默认设置为可读写
    },
    {
      id: 'createUser',
      label: '创建人',
      required: false, // 是否必填
      type: 'readwrite', // 默认设置为可读写
    },
    {
      id: 'goodsCost',
      label: '商品成本',
      required: false, // 是否必填
      type: 'readwrite', // 默认设置为可读写
    },
    {
      id: 'goodsCostUnit',
      label: '商品成本单位',
      required: false, // 是否必填
      type: 'readwrite', // 默认设置为可读写
    },
    {
      id: 'financialAccounting',
      label: '财务核算',
      required: false, // 是否必填
      type: 'readwrite', // 默认设置为可读写
    },
    {
      id: 'priceDataOperate',
      label: '销售价新增按钮',
      required: false, // 是否必填
      type: 'readwrite', // 默认设置为可读写
    },
    {
      id: 'priceData',
      label: '销售价',
      required: false, // 是否必填
      type: 'readwrite', // 默认设置为可读写
    },
    {
      id: 'isOpen1',
      label: '是否公开1',
      required: false, // 是否必填
      type: 'readwrite', // 默认设置为可读写
    },
    {
      id: 'isOpen2',
      label: '是否公开2',
      required: false, // 是否必填
      type: 'readwrite', // 默认设置为可读写
    },
    {
      id: 'isOpen3',
      label: '是否公开3',
      required: false, // 是否必填
      type: 'readwrite', // 默认设置为可读写
    },
    {
      id: 'isOpen4',
      label: '是否公开4',
      required: false, // 是否必填
      type: 'readwrite', // 默认设置为可读写
    },
    {
      id: 'examineAndApprove1',
      label: '审批1',
      required: false, // 是否必填
      type: 'readwrite', // 默认设置为可读写
    },
    {
      id: 'examineAndApprove2',
      label: '审批2',
      required: false, // 是否必填
      type: 'readwrite', // 默认设置为可读写
    },
    {
      id: 'opinionsOrSuggestions',
      label: '意见或建议',
      required: false, // 是否必填
      type: 'readwrite', // 默认设置为可读写
    },
  ],
  // 表单校验规则
  rules: {

  },
})

const { formDataModel, formDataModelType, rules, formDisabled, formHidden, fieldWidgets} = toRefs(data);

function submitForm() {
  proxy.$refs['GoodsForm'].validate(valid => {
    if (!valid) return
    //TODO: 提交表单
  })
}

function resetForm() {
  proxy.$refs['GoodsForm'].resetFields()
}

// 添加销售价
function handleAddPrice() {
  formDataModel.value.priceData.push({
    number: '',
    taxExcludingPrice: '',
    taxRate: '',
    taxIncludedPrice: '',
  })
}


/* --- 自定义组件必须实现方法 ---start */
// 设置表单数据
function setFormData(formData, formDisabled) {
  if (formDisabled) {
    disabled.value = formDisabled
  }
  Object.keys(formDataModel.value).forEach(propName => {
    if (!!formData && formData.hasOwnProperty(propName)) {
      formDataModel.value[propName] = deepCloneObj(formData[propName])
    }
  })
}

// 获取表单值
function getFormData() {
  let callback = function nullFunc() {}
  let promise = new Promise(function (resolve, reject) {
    callback = function(formDataModel, error) {
      !error ? resolve(formDataModel) : reject(error);
    };
  });

  proxy.$refs['GoodsForm'].validate((valid) => {
    if (valid) {
      callback(formDataModel.value)
    } else {
      callback(formDataModel.value, '表单数据校验失败')
    }
  })

  return promise
}

// 获取表单key-类型数据(数据会存入表中,流程设计,回显时使用)
function getFormModuleType() {
  return new Promise((resolve) => {
    resolve(formDataModelType.value);
  });
}

// 获取表单组件属性列表(数据会存入表中,流程设计,回显时使用)
function getFieldWidgets() {
  return fieldWidgets.value;
}

// 禁用表单组件
function disableWidgets(widgetNames) {
  widgetNames.forEach(name => formDisabled.value[name] = true);
}

// 启用表单组件
function enableWidgets(widgetNames) {
  widgetNames.forEach(name => formDisabled.value[name] = false);
}

// 隐藏表单组件
function hideWidgets(widgetNames) {
  Object.keys(formHidden.value).forEach(name => {
    formHidden.value[name] = !widgetNames.includes(name);
  });
}

/* --- 自定义组件必须实现方法 ---end */

// 暴露数据-vue3写法
defineExpose({
  resetForm,
  setFormData,
  getFormData,
  getFormModuleType,
  getFieldWidgets,
  disableWidgets,
  enableWidgets,
  hideWidgets,
});

</script>

<style lang="scss">
.el-input-number.full-width-input,
.el-cascader.full-width-input {
  width: 100% !important;
}

.el-form-item--medium {
  .el-radio {
    line-height: 36px !important;
  }

  .el-rate {
    margin-top: 8px;
  }
}

.el-form-item--small {
  .el-radio {
    line-height: 32px !important;
  }

  .el-rate {
    margin-top: 6px;
  }
}

.el-form-item--mini {
  .el-radio {
    line-height: 28px !important;
  }

  .el-rate {
    margin-top: 4px;
  }
}

.clear-fix:before,
.clear-fix:after {
  display: table;
  content: "";
}

.clear-fix:after {
  clear: both;
}

.float-right {
  float: right;
}

/* 组件宽度*/
.module-width {
  width: 50%;
}

.module-input-width {
  width: 50%;
}

div.table-container {
  table.table-layout {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;

    td.table-cell {
      display: table-cell;
      height: 36px;
      border: 1px solid #e1e2e3;
    }
  }
}

div.tab-container {}

.label-left-align :deep(.el-form-item__label) {
  text-align: left;
}

.label-center-align :deep(.el-form-item__label) {
  text-align: center;
}

.label-right-align :deep(.el-form-item__label) {
  text-align: right;
}

.custom-label {}

// 编号,日期
.static-container {
  display: flex;
  gap: 20px;
}

.static-number, .static-date {
  flex: 1;
  font-size: 16px;
  font-weight: bold;
}

// 表单内部文字居中
.static-content-item {
  min-height: 20px;
  display: flex;
  align-items: center;  /* 垂直居中 */
  justify-content: center;  /* 水平居中 */

  :deep(.el-divider--horizontal) {
    margin: 0;
  }
}
// 去除表单内input样式
.table-cell .el-form-item {
  margin-bottom: 0 !important;

  .el-input--small {
    --el-input-height: 32px !important;
  }

}

.table-cell .el-form-item .el-input__wrapper {
  border-radius: 0 !important;
  box-shadow: none !important;
}
.table-cell .el-form-item .el-input.is-disabled .el-input__wrapper {
  background-color: white !important;
}

// 去除表单内文本域样式
.table-cell .el-form-item .el-textarea__inner {
  border-radius: 0 !important;
  box-shadow: none !important;
}

.table-cell .el-form-item .el-textarea.is-disabled .el-textarea__inner {
  background-color: white !important;
}

// 去除表单内select样式
.table-cell .el-form-item  .el-select__wrapper {
  border-radius: 0 !important;
  box-shadow: none !important;
}
.table-cell .el-form-item .el-select__wrapper.is-disabled {
  background-color: white !important;
}

// 重写图片上传样式
.table-cell .el-form-item  .el-upload--picture-card {
  //max-width: 460px !important;
  border: none !important;
  background-color: white !important;
}

// 重写表格样式
.table-cell .el-table {
  .el-table__header-wrapper, .el-table__fixed-header-wrapper {
    th {
      word-break: break-word;
      background-color: #ffffff !important;
      color: #515a6e;
      height: 40px !important;
      font-size: 13px;
    }
  }
}
</style>
